<template>
	<view class="content">
		<view class="seachline">
			<image src="@/static/back.png" class="back"></image>
			<image src="@/static/Search.png" class="inputIcon"></image>
			<input class="input" confirm-type="search" placeholder="限时秒杀" />
			<button class="searBtn">搜索</button>
		</view>
		<view class="finds">
			<view class="item">
				<image class="itemPic" src="@/static/item1.png"></image>
				<view class="itemTitle">
					<text>茂谷柑【中】1份/约440g</text>
				</view>
				<view class="itemInfo">皮薄多汁 解渴润喉 全身是宝</view>
				<image class="tagPic" src="@/static/tag.png"></image>
				<view class="noPrice">￥39.9</view>
				<view class="price">￥35.9</view>
				<button class="itemBtn">选规格</button>
			</view>
			<view class="item">
				<image class="itemPic" src="@/static/item1.png"></image>
				<view class="itemTitle">
					<text>茂谷柑【中】1份/约440g</text>
				</view>
				<view class="itemInfo">皮薄多汁 解渴润喉 全身是宝</view>
				<image class="tagPic" src="@/static/tag2.png"></image>
				<view class="noPrice">￥39.9</view>
				<view class="price">￥35.9</view>
				<button class="itemBtn">选规格</button>
			</view>
			<view class="item">
				<image class="itemPic" src="@/static/item1.png"></image>
				<view class="itemTitle">
					<text>茂谷柑【中】1份/约440g</text>
				</view>
				<view class="itemInfo">皮薄多汁 解渴润喉 全身是宝</view>
				<image class="tagPic" src="@/static/tag2.png"></image>
				<view class="noPrice">￥39.9</view>
				<view class="price">￥35.9</view>
				<button class="itemBtn">选规格</button>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
</script>

<style scoped>
.content{
	width: 100vw;
	height: 105vh;
	box-sizing: border-box;
	padding: 32rpx;
	background-color: #FBF9F5;
}
.seachline{
	width: 100%;
	height:66rpx;
	position: relative;
	display: inline-block;
}
.input{
	height: 100%;
	border-radius: 44rpx;
	background-color: #fff;
	padding: 0 146rpx 0 78rpx;
	position: absolute;
	top: 0;
	left:28rpx;
}
.inputIcon{
	width: 36rpx;
	height: 36rpx;
	top: 16rpx;
	left:58rpx;
	position: absolute;
	z-index: 1;
}
.back{
	width: 27rpx;
	height: 27rpx;
	position: absolute;
	top: 16rpx;
	left:0;
}
.searBtn{
	width: 140rpx;
	height: 60rpx;
	background: linear-gradient(to bottom right, #FF8041 0%, #FFCB42 100%);
	color: #fff;
	position: absolute;
	top: 6rpx;
	right:6rpx;
	line-height: 60rpx;
	border-radius: 44rpx;
}
.finds{
	margin-top: 36rpx;
	width: 100%;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.item{
	width: 338rpx;
	height:630rpx;
	position: relative;
	background-color:#fff;
	border-radius: 16rpx;
	border: 3rpx solid #eee;
	margin-bottom: 18rpx;
}
.itemPic{
	width: 238rpx;
	height: 244rpx;
	position: absolute;
	top: 30rpx;
	left: 36rpx;
}
.itemTitle{
	width: 308rpx;
	height: 80rpx;
	position: absolute;
	top: 340rpx;
	left: 16rpx;
}
.itemTitle text{
	color: #000000;
	font-size: 30rpx;
	line-height: 40rpx;
}
.itemInfo{
	color: #8C8C8C;
	font-size: 20rpx;
	line-height: 30rpx;
	height: 30rpx;
	width: 284rpx;
	position: absolute;
	bottom: 172rpx;
	left: 16rpx;
}
.tagPic{
	width: 178rpx;
	height: 30rpx;
	position: absolute;
	bottom: 136rpx;
	left: 16rpx;
}
.noPrice{
	color: #858685;
	font-size: 32rpx;
	text-decoration: line-through;
	height: 34rpx;
	width: 284rpx;
	line-height: 34rpx;
	position: absolute;
	bottom: 96rpx;
	left: 16rpx;
}
.price,.price2{
	color: #F64F5F;
	font-size: 36rpx;
	height: 38rpx;
	width: 284rpx;
	line-height: 38rpx;
	position: absolute;
	bottom: 54rpx;
	left: 16rpx;
}
.price2{
	bottom: 60rpx;
	left: 16rpx;
}
.itemBtn{
	width: 116rpx;
	height: 44rpx;
	border-radius: 22rpx;
	color: #fff;
	background-color: #F6954E;
	position: absolute;
	bottom: 62rpx;
	right: 16rpx;
	font-size: 19rpx;
}
</style>